<template>
  <div>
    <el-dialog v-model="ViewdialogVisible" width="80%" align-center destroy-on-close draggable>
      <template #header="{ close }">
        <div class="dialog-header flex justify-between items-center">
          <div>科研成果转化查看</div>
          <el-icon class="el-icon--left cursor-pointer" @click="close">
            <CircleCloseFilled color="#fff" />
          </el-icon>
        </div>
      </template>
      <div class="pt-[30px] pb-[20px] bg-white">
        <div class="px-[5px]  text-right" v-if="procInsId != null">
          <el-link type="primary" @click="checkHistoryModalVisible = true">审核记录</el-link>
        </div>
        <el-tabs class="demo-tabs">
          <el-tab-pane label="基本信息">
            <div>
              <!-- 基本信息 -->
              <div class="bg-white mt-[10px]">
                <!-- <BaseHead>基本信息</BaseHead> -->
                <div class="p-[10px]">
                  <el-descriptions title="" :column="2" border label-width="140">
                    <el-descriptions-item label-class-name="gdlable" label="成果名称">{{
      ruleForm.name
    }}</el-descriptions-item>
                    <el-descriptions-item label-class-name="gdlable" label="所属单位">{{
        formatUnitId(ruleForm.unitId)
      }}</el-descriptions-item>
                    <el-descriptions-item label-class-name="gdlable" label="成果联系人">{{
        ruleForm.txAuthorName
      }}</el-descriptions-item>
                    <el-descriptions-item label-class-name="gdlable" label="联系人电话">{{
        ruleForm.txAuthorTel
      }}</el-descriptions-item>
                    <el-descriptions-item label-class-name="gdlable" label="第一完成人">{{
        ruleForm.firstAuthorName
      }}</el-descriptions-item>
                    <el-descriptions-item label-class-name="gdlable" label="完成人电话">{{
        ruleForm.authorTel
      }}</el-descriptions-item>
                    <el-descriptions-item label-class-name="gdlable" label="研发起止时间">{{ ruleForm.researchDate[0] }}-{{
      ruleForm.researchDate[1] }}</el-descriptions-item>
                    <el-descriptions-item label-class-name="gdlable" label="知识产权类型">{{
      formatTypeId(ruleForm.typeId)
    }}</el-descriptions-item>
                    <el-descriptions-item label-class-name="gdlable" label="知识产权编号">{{
        ruleForm.code
      }}</el-descriptions-item>
                    <el-descriptions-item label-class-name="gdlable" label="成果体现形式">{{
        formatManifestationId(ruleForm.manifestationId)
      }}</el-descriptions-item>
                    <el-descriptions-item label-class-name="gdlable" label="技术成熟度">{{
        formatMatureId(ruleForm.matureId)
      }}</el-descriptions-item>
                    <el-descriptions-item label-class-name="gdlable" label="技术先进度">{{
        formatAdvancedId(ruleForm.advancedId)
      }}</el-descriptions-item>
                    <el-descriptions-item label-class-name="gdlable" label="所属高新技术领域">{{
        formatDomainId(ruleForm.domainId)
      }}</el-descriptions-item>
                    <el-descriptions-item label-class-name="gdlable" label="成果主要应用行业">
                      {{
        formatIndustryId(ruleForm.industryId)
      }}
                    </el-descriptions-item>
                    <el-descriptions-item label-class-name="gdlable" label="成果获得方式">{{
        formatObtainId(ruleForm.obtainId)
      }}</el-descriptions-item>
                    <el-descriptions-item label-class-name="gdlable" label="获得政府支持情况">
                      {{ formatSupportId(ruleForm.support.check) }} <br>
                      计划/专项类别：{{ ruleForm.support.type }}<br>
                      获得经费：{{ ruleForm.support.fee }}
                      自筹资金：{{ ruleForm.support.zczj }}
                      自筹资金来源：{{ ruleForm.support.zczj_source }}</el-descriptions-item>
                    <el-descriptions-item label-class-name="gdlable" label="成果简介">{{
      ruleForm.introduce
                      }}</el-descriptions-item>
                    <el-descriptions-item label-class-name="gdlable" label="成果附件">
                      <div v-for="item in ruleForm.fileList" :key="item.id">
                        {{ item.fileName
                        }}<el-link type="primary" style="margin-left: 8px" @click="downloadMet(item.id)">下载</el-link>
                      </div>
                    </el-descriptions-item>
                    <el-descriptions-item label-class-name="gdlable" label="所需支持或建议">{{
                      ruleForm.suggestion
                      }}</el-descriptions-item>
                    <el-descriptions-item label-class-name="gdlable" label="拟采取转化方式">{{
                      formatTransforId(ruleForm.transforId)
                      }}</el-descriptions-item>
                    <el-descriptions-item label-class-name="gdlable" label="备注">{{
                      ruleForm.note
                      }}</el-descriptions-item>
                  </el-descriptions>
                </div>
              </div>
            </div>
          </el-tab-pane>
        </el-tabs>
      </div>
    </el-dialog>
  </div>
  <CheckHistoryModal v-model="checkHistoryModalVisible" :procInsId="procInsId" :checker="checker"
    :checkDate="checkDate" />
</template>
<script setup>
import BaseHead from '@/views/project/components/BaseHead.vue'
import { getCategory } from '@/api/system/category'
import CheckHistoryModal from "@/views/project/components/CheckHistoryModal.vue";
const ViewdialogVisible = defineModel()
const props = defineProps({
  xlList: Array,
  zcList: Array,
  zcgsdwList: Array,
  typeIdList: Array,
  manifestationIdList: Array,
  matureIdList: Array,
  advancedIdList: Array,
  domainIdList: Array,
  sshyList: Array,
  obtainIdList: Array,
  supportIdList: Array,
  transforIdList: Array,
})

const checkHistoryModalVisible = ref(false);
const procInsId = ref(null); //流程实例id
const checker = ref("");
const checkDate = ref("");

const ruleForm = reactive({})
const tableData = reactive([])

const formatUnitId = (cellValue) => {
  if (props.zcgsdwList.length && cellValue) {
    return props.zcgsdwList.find((item) => item.codeColumn == cellValue).valueColumn
  } else {
    return ''
  }
}
const formatTypeId = (cellValue) => {
  if (props.typeIdList.length && cellValue) {
    let format = []
    cellValue.forEach((element) => {
      format.push(props.typeIdList.find((item) => item.code == element).name)
    })
    return format.join(",")
  } else {
    return ''
  }
}
const formatManifestationId = (cellValue) => {
  if (props.manifestationIdList.length && cellValue) {
    let format = []
    cellValue.forEach((element) => {
      format.push(props.manifestationIdList.find((item) => item.code == element).name)
    })
    return format.join(",")
  } else {
    return ''
  }
}
const formatMatureId = (cellValue) => {
  if (props.matureIdList.length && cellValue) {
    let format = []
    cellValue.forEach((element) => {
      format.push(props.matureIdList.find((item) => item.code == element).name)
    })
    return format.join(",")
  } else {
    return ''
  }
}
const formatAdvancedId = (cellValue) => {
  if (props.advancedIdList.length && cellValue) {
    let format = []
    cellValue.forEach((element) => {
      format.push(props.advancedIdList.find((item) => item.code == element).name)
    })
    return format.join(",")
  } else {
    return ''
  }
}
const formatDomainId = (cellValue) => {
  if (props.domainIdList.length && cellValue) {
    let format = []
    cellValue.forEach((element) => {
      format.push(props.domainIdList.find((item) => item.code == element).name)
    })
    return format.join(",")
  } else {
    return ''
  }
}

const formatIndustryId = (cellValue) => {
  if (props.sshyList.length && cellValue) {
    let format = []
    cellValue.forEach((element) => {
      format.push(props.sshyList.find((item) => item.id == element) ? props.sshyList.find((item) => item.id == element).label : '')
    })
    return format.join(",")
  } else {
    return ''
  }
}
const formatSupportId = (cellValue) => {
  if (props.supportIdList.length && cellValue) {
    let format = []
    cellValue.forEach((element) => {
      format.push(props.supportIdList.find((item) => item.code == element).name)
    })
    return format.join(",")
  } else {
    return ''
  }
}

const formatObtainId = (cellValue) => {
  if (props.obtainIdList.length && cellValue) {
    let format = []
    cellValue.forEach((element) => {
      format.push(props.obtainIdList.find((item) => item.code == element).name)
    })
    return format.join(",")
  } else {
    return ''
  }
}
const formatTransforId = (cellValue) => {
  if (props.transforIdList.length && cellValue) {
    let format = []
    cellValue.forEach((element) => {
      format.push(props.transforIdList.find((item) => item.code == element).name)
    })
    return format.join(",")
  } else {
    return ''
  }
}

const formateduLevelId = (cellValue) => {
  if (props.xlList.length && cellValue) {
    return props.xlList.find((item) => item.code == cellValue).name
  } else {
    return ''
  }
}
const getRuleForm = (i) => {
  for (const key in i) {
    ruleForm[key] = i[key]
  }
  ruleForm.researchDate = [ruleForm.researchStartdate, ruleForm.researchEnddate]
  ruleForm.typeId = ruleForm.typeId.split(',')
  ruleForm.manifestationId = ruleForm.manifestationId.split(',')
  ruleForm.matureId = ruleForm.matureId.split(',')
  ruleForm.advancedId = ruleForm.advancedId.split(',')
  ruleForm.domainId = ruleForm.domainId.split(',')
  ruleForm.industryId = ruleForm.industryId.split(',')
  ruleForm.obtainId = ruleForm.obtainId.split(',')
  ruleForm.transforId = ruleForm.transforId.split(',')
  ruleForm.support = JSON.parse(ruleForm.supportId)
  ruleForm.support.check = ruleForm.support.check.split(',')
  ruleForm.txAuthorName = JSON.parse(ruleForm.txAuthor).name

  procInsId.value = ruleForm.processInstanceId;
  checker.value = ruleForm.checker;
  checkDate.value = ruleForm.checkdate;
}
const { proxy } = getCurrentInstance()
const downloadMet = (i) => {
  proxy.$download.common(i)
}

defineExpose({
  getRuleForm,
})
</script>
<style lang="scss">
.gdlable {
  width: 140px;
}
</style>
<style scoped lang="scss">
@import url('@/views/achievement/index.scss');

:deep(.el-select--default) {
  .el-select__wrapper.is-disabled {
    background-color: #fff;
    box-shadow: 0 0 0 0px var(--el-select-disabled-border) inset;
    color: #606266;
    cursor: not-allowed;

    .el-select__selected-item {
      color: #606266;
    }
  }

  .el-select__suffix {
    display: none;
  }
}
</style>
